<!--
 * @Descripttion: 
 * @version: 
 * @Author: WangMingJun
 * @Date: 2022-09-30 11:28:23
 * @LastEditors: WangMingJun
 * @LastEditTime: 2024-06-26 18:54:45
-->
<template>
  <div id="app">
      <!-- 返回顶部 -->
      <back-top></back-top>
      <!-- 整个视图 -->
      <router-view v-if="isRouterShow"></router-view>
      <!-- 背景 -->
      <div id="bgvid" >
          <img src="~@/assets/img/bgbg.jpg" alt="">
      </div>
      <div class="rain-container">
        <div class="drop" v-for="(drop, index) in drops" :key="index" :style="{ left: drop.x + 'px', top: drop.y + 'px' }"></div>
      </div>
  </div>
</template>
<script>
import BackTop from './components/backTop/BackTop.vue'

export default {
  components: { BackTop },
  provide () {
    return {
      reload: this.reload,
    }
  },
  data () {
    return {
      isRouterShow: true,
      rainInstance: null,
      drops: [],
      dropCount: 100,
      dropSpeed: 20,
      dropWidth: 2,
      dropHeight: 10,
      containerWidth: 0,
      containerHeight: 0
    }
  },
  methods: {
    // 定义刷新子组件的方法
    async reload () {
      this.isRouterShow = false
      await this.$nextTick()
      this.isRouterShow = true
    },
    generateDrop() {
      for (let i = 0; i < this.dropCount; i++) {
        setTimeout(() => {
          const x = Math.random() * this.containerWidth;
          const y = Math.random() * this.containerHeight;
          this.drops.push({ x, y });
        }, i * 20);
      }
    },
    animateDrop() {
      setInterval(() => {
        this.drops.forEach(drop => {
          if (drop.y > this.containerHeight) {
            drop.y = 0 - this.dropHeight;
          }
          drop.y += this.dropSpeed;
        });
      }, 30);

    },
    setContainerSize() {
      this.containerWidth = window.innerWidth;
      this.containerHeight = window.innerHeight;
    }
  },
  created(){
    setTimeout(() => {
      // 加载页面完后移除加载动画
      document.body.removeChild(document.getElementById('Loading'))   
    },2000)
     
  },
  mounted() {
    this.setContainerSize();
    window.addEventListener('resize', this.setContainerSize);
    this.generateDrop();
    this.animateDrop();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setContainerSize);
  }
}
</script>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
}

#bgvid { 
  position: fixed; 
  right: 0; 
  bottom: 0; 
  width: 100vw;
  height: 100vh; 
  // width: auto; 
  // height: auto; 
  z-index: -100; 
  background-size: 100% 100%;
  img {
    width: 100%;
    height: 100%;
  }

}

.rain-container {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  width: 100vw;
  height: 100vh; 
  z-index: -50;
}
.drop {
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: rgba(233, 223, 222, 1);
  animation: rainDrop 5s linear infinite;
}
@keyframes rainDrop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
</style>
